import React, { ReactNode } from 'react'
import { Timeline, Divider, Badge } from 'antd'
import style from './style.module.scss'

interface BaseAnnouncePageProps {

}

interface BaseAnnouncePageState {

}

interface BaseAnnounceItemProps {
    data: {
        title: string;
        description: string;
        time: string;
        isUnRead: boolean;
    };
}

const BaseAnnounceItem: React.FC<BaseAnnounceItemProps> = (props: BaseAnnounceItemProps) => (
    <>
        <div className={style.announceItem}>
            {
                props.data.isUnRead
                    ? <Badge status={'error'}>
                        <h2>{props.data.title}</h2>
                    </Badge>
                    : <h2>{props.data.title}</h2>
            }
            <p>{props.data.time}</p>
            <p className={style.description}>{props.data.description}</p>
        </div>
        <Divider dashed/>
    </>
)

const mockData: BaseAnnounceItemProps = {
    data: {
        title: '推荐｜如何选择考研数学辅导书？',
        time: new Date().toLocaleDateString().replace(/\//g, '-'),
        isUnRead: true,
        description: '考研数学满分150分，在考研科目中的比重明显。同时，根据教育部考试中心编著的《全国硕士研究生招生考试数学考试分析》的考研数据权威分析，全国考研数学平均分在70分左右，考生的数学成绩历年来总是差别很大。... \n'
    }
}

export class BaseAnnouncePage extends React.Component<BaseAnnouncePageProps, BaseAnnouncePageState> {
    render (): ReactNode {
        return (
            <Timeline>
                {
                    Array(10).fill(undefined).map((item, index) => {
                        return (
                            <BaseAnnounceItem key={index} data={mockData.data}/>
                        )
                    })
                }
            </Timeline>
        )
    }
}
